<template>
  <div class="code">
      <codemirror
        ref="myCm"
        v-model="item.content"
        :options="cmOptions"
        @changes="reveal"
        class="code"
      ></codemirror>
  </div>
</template>

<script>
// 引入throttle
import throttle from 'lodash/throttle'

export default {
  name:'Mirr',
  data() {
    return {
      item: { content: "" },
      cmOptions: {
        tabSize: 4,
        indentUnit:2,
        mode: "python",
        theme: "material",
        lineNumbers: true,
        lineWrapper: true,
        extraKeys: { Ctrl: "autocomplete" },
        lineWiseCopyCut: true,
        showCursorWhenSelecting: true,
        matchBrackets: true,
        line: true,
        autofocus: true,
        styleActiveLine: true,
      },
    };
  },
 
  methods: {
    reveal:throttle(function(){
      this.$bus.$emit('changes',this.item.content)
    },20),
    
  },
};
</script>

<style lang="less">
.code{
  width: 100%;
  height: 570px;
  .CodeMirror{
    height: 100% !important;
    text-align: left;
    font-size:14px;
    padding: 0;
  }
}
</style>
